
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK rel=stylesheet type=text/css
	href="../css1/flexy_admin_files/style_all.css" media=screen>
<!-- to choose another color scheme uncomment one of the foloowing stylesheets and wrap styl1.css into a comment -->
<LINK rel=stylesheet type=text/css
	href="../css1/flexy_admin_files/style1.css" media=screen>

<LINK rel=stylesheet type=text/css
	href="../css1/flexy_admin_files/jquery-ui.css" media=screen>
<LINK rel=stylesheet type=text/css
	href="../css1/flexy_admin_files/jquery.wysiwyg.css" media=screen>
<!--Internet Explorer Trancparency fix-->
<!--[if IE 6]>
        <script src="js/ie6pngfix.js"></script>
        <script>
          DD_belatedPNG.fix('#head, a, a span, img, .message p, .click_to_close, .ie6fix');
        </script>
        <![endif]-->
<SCRIPT type=text/javascript src="../css1/flexy_admin_files/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript
	src="../css1/flexy_admin_files/jquery-ui.js"></SCRIPT>
<SCRIPT type=text/javascript
	src="../css1/flexy_admin_files/jquery.wysiwyg.js"></SCRIPT>
<SCRIPT type=text/javascript src="../css1/flexy_admin_files/custom.js"></SCRIPT>
<!-- END JAVASCRIPT -->
<link rel="stylesheet" href="../css1/theme/default/style.css"
	type="text/css">
<style>
</style>
<link rel="stylesheet" href="../OpenLayers/theme/default/style.css"
	type="text/css">
<style>
.opmap {
	height: 500px;
	width: 550px;
}
/* The map and the location bar */
#map {
	clear: both;
	position: relative;
	width: 950;
	height: 500px;
	border: 1px solid black;
}

.mypopuphtml {
	padding-left: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 5px;
	font-family: Arial;
	font-size: 8pt;
	background-color: white;
}
</style>
<script src="../OpenLayers/lib/OpenLayers.js"></script>

</HEAD>
<title>Information System</title>
</head>
<body>
	<DIV id=top>
		<!--end head-->
		<DIV id=bg_wrapper>
			<DIV id=main>
				<DIV id=content>
					<DIV class=jquery_tab>
						<DIV class=content_block>
							<H2 class=jquery_tab_title style="color: black;">Geographic
								Information System</H2>
						</DIV>
							<div id="layerswitcher" class="olControlLayerSwitcher"></div>
							<div id="map">
	<script defer="defer" type="text/javascript">
		var zoom = 10;
        var map;
		var infoControls;
		var highlightlayer;
		var selectControl;
		var aktLayer=-1;
		// pink tile avoidance
		OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
		// make OL compute scale according to WMS spec
		OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

		OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

       

			format = 'image/png';

			var bounds = new OpenLayers.Bounds(
				 80.060150146796, 26.34874029520519,
                    88.2042617796755, 30.44852477101598
			);

			var options = {
				controls: [],
				maxExtent: bounds,
				maxResolution: 0.023609375,
				projection: "EPSG:4326",
				units: 'degrees'
			};

			map = new OpenLayers.Map('map', options);

			// setup tiled layer
			var dist = new OpenLayers.Layer.WMS(
				"NepalDistrict", "http://localhost:8080/geoserver/wms",
				{
					srs: 'EPSG:4326',
					width: '450',
					styles: '',
					height: '512',
					layers: 'wecs:TM_WORLD_BORDERS-0',
					format: format,
					tiled: 'true',
					tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom,
					isBaseLayer: true,
					visibility: true
				},
				{
					buffer: 0,
					displayOutsideMaxExtent: true
				}
			);
			

			
			
			/*var climate = new OpenLayers.Layer.WMS(
				
				"Climate Station", "http://localhost:8080/geoserver/wms",
				{
					transparent: 'TRUE',
					srs: 'EPSG:4326',
					layers: 'wecs:climate_station_wgs84',
					format: format,
					
					
					isBaseLayer: false,
					visibility: true
				}
			);
			var basin = new OpenLayers.Layer.WMS(
				
				"Basin", "http://localhost:8080/geoserver/wms",
				{
					transparent: 'TRUE',
					srs: 'EPSG:4326',
					layers: 'wecs:subbasin_wgs84',
					format: format,
					
					
					isBaseLayer: false,
					visibility: true
				}
			);*/

           /* var bdhq = new OpenLayers.Layer.WMS(
                "Bangladesh Dist HQ",
                "http://localhost:8088/geoserver/wms",
                {
                    transparent: 'TRUE',
                    srs: 'EPSG:4326',
					layers: 'bdadmin:dist_hq_geo',
					format: format,
					isBaseLayer: false,
					visibility: true
                }
            );*/
			

		   //map.addLayers([gphy, gmap, ghyb, gsat]);
           map.addLayers([dist]);
		    map.addControl( new OpenLayers.Control.LayerSwitcher() );
			var layers = new Array();
			var i=0;
			var highlight_style= new Array();
		   function showMap(layerName){
			var singleLayer= new OpenLayers.Layer.WMS(
				
				layerName, "http://localhost:8080/geoserver/wms",
				{
					transparent: 'TRUE',
					srs: 'EPSG:4326',
					layers: layerName,
					format: format,
					isBaseLayer: false,
					visibility: true
				}
			);
			layers[i]=singleLayer	
			var highlight_style = { fillColor:'#FFAA11', strokeColor:'#FFAA11', fillOpacity:0.7 };

			highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
				displayInLayerSwitcher: false,
				isBaseLayer: false,
				style:highlight_style
				}
			);
			map.addLayers([layers[i],highlightLayer])
			infoControls = {
            click: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8080/geoserver/wms',
                title: 'Identify features by clicking',
                layers: [layers[i]],
                queryVisible: true,
				infoFormat:'application/vnd.ogc.gml',
				eventListeners: {
					getfeatureinfo: function(event) {
						map.addPopup(new OpenLayers.Popup.FramedCloud(
							"chicken",
							map.getLonLatFromPixel(event.xy),
							null,
							GenPopText(event),
							null,
							true
						));
                }}
           	}),
            hover: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8080/geoserver/wms',
                title: 'Identify features by clicking',
                layers: [layers[i]],
                hover: true,
                // defining a custom format options here
                formatOptions: {
                    typeName: 'water_bodies',
                    featureNS: 'http://www.openplans.org/topp'
                },
                queryVisible: true,
				infoFormat:'text/html'
            	})

			};
			for (var i in infoControls) {
				infoControls[i].events.register("getfeatureinfo", this, showInfo);
				map.addControl(infoControls[i]);
			}
			
			infoControls.click.activate();
			//infoControls.hover.activate();

			// Active layer combo
			populateLayer(0);
			// sets the HTML provided into the nodelist element
		    i=i+1;
			}
			function setHTML(response){
			document.getElementById('nodelist').innerHTML = response.responseText;
		};

		function errorHTML(response)
		{
			alert("req erro:" + response.responseText);
		}

    	function showInfo(evt) {
			if (evt.features && evt.features.length) {
				 highlightLayer.destroyFeatures();
				 highlightLayer.addFeatures(evt.features);
				 highlightLayer.redraw();

				 $('nodelist').innerHTML = GenPopText(evt);

			} else {
				$('nodelist').innerHTML = evt.text;
			}
        }

		function GenPopText(evt){
				 var temstr="<b><i>" + evt.features[0].gml.featureType + "</i></b><br/>";
				 for(var key in evt.features[0].attributes)
				 {
					temstr += "<b>" + key + "</b>:" + evt.features[0].attributes[key] + "<br/>";
				 }
				 return temstr
		}

			// build up all controls
			map.addControl(new OpenLayers.Control.PanZoomBar({
				position: new OpenLayers.Pixel(2, 15)
			}));
			selectControl = new OpenLayers.Control.SelectFeature(
                [layers[i]],
                {
                    clickout: true, toggle: false,
                    multiple: false, hover: false,
                    toggleKey: "ctrlKey", // ctrl key removes from selection
                    multipleKey: "shiftKey" // shift key adds to selection
                }
            );
            
            map.addControl(selectControl);
            selectControl.activate();

			map.addControl(new OpenLayers.Control.Navigation());
			map.addControl(new OpenLayers.Control.Scale($('scale')));
			map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
           
			//map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
			map.zoomToExtent(bounds);
			map.updateSize();
    </script>
							</div>
							<div id="wrapper">
								<div id="location" style="float: left">location</div>
								<div id="scale" style="float: left"></div>
								<div id="scale" style="clear: both"></div>
							</div>
							<div id="nodelist">
								<em>Click on the map to get feature info</em>
							</div>

						</div>

						<BR />
						<!--end content_block-->
					</DIV>
					<!-- end jquery_tab -->
				</DIV>
				<!--end content-->
			</DIV>
			<!--end main-->
			<DIV id=sidebar style="margin-top:-545px;">
				<UL class=nav>
					<LI><A class="headitem item1" href="#">MAP CATEGORY</A>
					<LI><A class="headitem item2" href="#">WATER RESOURCES</A>
						<UL>
							<!-- ul items without this class get hiddden by jquery-->
							<LI><A href="#" onclick="showMap('wecs:district_wgs');">Nepal District</A>
							<LI><A href="#" onclick="showMap('wecs:river_wgs');">Nepal Rivers </A>
							<LI><A href="#" onclick="showMap('wecs:pourpoint_basin_wgs84');">Pour Point </A>
							<LI><A href="#" onclick="showMap('wecs:climate_station');">Climate Zone</A>
						</UL></LI>
					<LI><A class="headitem item5" href="#">ADMIN
							BOUNDARIES</A>
					<LI><A class="headitem item4" href="#">ENVIRONMENT</A>
				</UL>
				<!--end subnav-->
			</DIV>
			<!--end sidebar-->
		</DIV> 
		<!--end bg_wrapper-->
		<DIV id=footer></DIV>
		<!--end footer-->
	</DIV>
	<!-- end top -->

</body>
</html>